<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZPPChat | Registration</title>
  
  <!-- JQuery -->
  <script                 src="/js/jquery-1.8.2.js"></script>
  
  <!-- JQuery Validation -->
  <script                 src="/js/jquery-validation-1.10.0/jquery.validate.js"></script>
  
  <!-- JQuery UI Datepicker -->
  <link rel="stylesheet"  href="/css/jquery-ui-1.9.2-base-theme/jquery-ui.css">
  <script                 src="/js/jquery.ui.1.9.2.core.js"></script>
  <script                 src="/js/jquery.ui.1.9.2.datepicker.js"></script>
  
  <!-- User defined scripts and stylesheets. -->
  <script type="text/javascript">
    // Values used in register.js.
    var LIMITS = {{ limits|safe|lower }};
    var MESSAGES = {{ error_messages|safe }}
    var errors = {{ errors|safe|lower }};
  </script>
  <link rel="stylesheet"  href="/css/global.css">
  <script                 src="/js/register.js"></script>
</head>

<body>
  <div id="register" class="box inside-bordered top-box standard-width centered">
    <h1>Registration</h1>
    
    <!-- Form to enter account details. -->
    <form action="{{ form_action_url }}" method="post">
      <fieldset id="inputs">
        <!-- Username -->
        <label for="username" class="error" generated="true"></label>
        <input type="text" name="username" maxlength="{{ limits.username_max_length }}"
               placeholder="Username" value="{{ values.username }}"
               class="field username-input" autofocus tabindex="1">
        
        <!-- Password -->
        <label for="password" class="error" generated="true"></label>
        <input type="password" name="password" maxlength="{{ limits.password_max_length }}"
               placeholder="Password" value="{{ values.password }}"
               id="password" class="field password-input" tabindex="2">
        
        <label for="password-repeat" class="error" generated="true"></label>
        <input type="password" name="password-repeat" maxlength="{{ limits.password_max_length }}"
               placeholder="Repeat password" class="field password-input" tabindex="3">
        
        <!-- Email -->
        <label for="email" class="error" generated="true"></label>
        <input type="text" name="email" maxlength="{{ limits.email_max_length }}"
               placeholder="Email{% if not limits.email_required %} (optional){% endif %}"
               value="{{ values.email }}" class="field email-input" tabindex="4">
        
        <!-- Name -->
        <label for="name" class="error" generated="true"></label>
        <input type="text" name="name" maxlength="{{ limits.name_max_length }}"
               placeholder="Name{% if not limits.name_required %} (optional){% endif %}"
               value="{{ values.name }}" class="field info-input" tabindex="5">
        
        <!-- Surname -->
        <label for="surname" class="error" generated="true"></label>
        <input type="text" name="surname" maxlength="{{ limits.surname_max_length }}"
               placeholder="Surname{% if not limits.surname_required %} (optional){% endif %}"
               value="{{ values.surname }}" class="field info-input" tabindex="6">
        
        <!-- Date of birth -->
        <label for="date-of-birth" class="error" generated="true"></label>
        <input type="text" name="date-of-birth" value="{{ values.date_of_birth }}"
               placeholder="Date of birth{% if not limits.date_of_birth_required %} (optional){% endif %}"
               id="date-of-birth" class="field date-input" tabindex="7">
      </fieldset>
      
      <fieldset id="actions">
        <input type="submit" class="button left" value="Register" id="submit" tabindex="8">
        <a class="button right" href="{{ main_page_url }}" tabindex="9">Back</a>
      </fieldset>
    </form>
  </div>
</body>

</html>